<template>
	<div class="home-swiper">
	  	<swiper :options="swiperOption" v-if="swiperLen">
		    <swiper-slide v-for="slide in swiperSlides" :key="slide.id">
		    	<img :src="slide.imgUrl">
		    </swiper-slide>
		    <div class="swiper-pagination" slot="pagination"></div>
	  	</swiper>
	</div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
  	swiperSlides: Array
  },
  data() {
    return {
      swiperOption: {
        pagination: {
			  el: '.swiper-pagination'
        },
        loop: true,
        autoplay: true
      }
    };
  },
  computed: {
  	 swiperLen() {
  	 	return this.swiperSlides.length
  	 }
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/var.styl'
	.home-swiper >>> .swiper-pagination-bullet-active
		background-color: #fff
	.home-swiper
		width: 100%
		height: 0
		padding-bottom: 32%
		background-color: $noDataColor
		.swiper-slide
			img
				width: 100%
</style>
